import React, { Component } from 'react';
import 'antd/dist/antd.css';
import WasmPlayer from '@easydarwin/easywasmplayer'  //导入WasmPlayer.js
import { connect } from 'umi';
import styles from './cameraPlayer.less';


@connect(({ cameraLive, loading }) => ({
  cameraLive,
  loading: loading.models.cameraLive,
}))
class CameraPlayer extends Component {
  constructor(props) {
    super(props);
    this.state ={
      videoId: this.randomString(8),
      wasmPlayer: null,
      videoDetail:{}
    }
    this.callbackfun = this.callbackfun.bind(this);
  }
  randomString(e) {
    e = e || 32;
    var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678",
      a = t.length,
      n = "";
    for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a));
    return n
  }

  componentDidMount(){
    // this.setState({
    //   wasmPlayer: new WasmPlayer(
    //     null,
    //     this.state.videoId,
    //     this.callbackfun,{
    //       Height:true
    //     })
    // })
  }

  componentDidUpdate(prevProps, prevState) {
    if(this.props.liveData && (this.props.history === undefined || this.props.history === false)){
      if(this.props.liveData.channelId !== prevProps.liveData.channelId){
        this.starLive(this.props.liveData)
      }
    }else if(this.props.recordTime !==null){
      if(prevProps.recordTime ===null){
        this.starRecordLive();
      }else if(this.props.recordTime.startTime !== prevProps.recordTime.startTime){
        this.starRecordLive();
      }
    }
  }

  componentWillUnmount() {
    this.destroyPlay();
  }

  // componentWillReceiveProps(nextProps) {
  //   this.starLive(nextProps.liveData)
  // }

  destroyPlay(){
    if(this.state.wasmPlayer!=null){
      this.state.wasmPlayer.destroy();
      this.setState({
        wasmPlayer: null
      })
    }
  }

  startPlay(liveUrl){
    this.destroyPlay();
    const newWasmPlayer = new WasmPlayer(
      null,
      this.state.videoId,
      this.callbackfun,{
        Height:true
      })
    newWasmPlayer.play(liveUrl,1);
    this.setState({
      wasmPlayer: newWasmPlayer,
    })
  }

  callbackfun(e,param){
    if(e == 'ended'){
      this.destroyPlay();
    }
    // console.log("e "+e +"  "+param);
    if(this.props.playbackTime){
      this.props.playbackTime(e)
    }
    // if(e === 'playbackTime'){
    //   if(this.props.playbackTime){
    //     this.props.playbackTime()
    //   }
    // }
    // console.log(this.props.playStateChange)
    // if(this.props.playStateChange){
    //   this.props.playStateChange(e);
    // }
  }

  starRecordLive(){
    const { dispatch,liveData,recordTime} = this.props;
    const that = this;
    dispatch({
      type: 'cameraLive/playbackStart',
      payload: {
        deviceId: liveData.deviceId,
        channelId: liveData.channelId,
        startTime: recordTime.startTime,
        endTime: recordTime.endTime,
      },
    }).then((res)=>{
      if(res instanceof String){

      }else{
        that.startPlay(res.flv);
      }
    })
  }
  starLive(liveData){
    // this.startPlay('https://rtmp01open.ys7.com:9188/v3/openlive/C77560551_1_1.flv?expire=1653838896&id=320708634406055936&t=b2e0ac6c48246dc73be6328a31c427f17480cf65d10001cd20892b7438963b4e&ev=100')
    // return
    const { dispatch } = this.props;
    if(liveData.channelId){
      const that = this;
      dispatch({
        type: 'cameraLive/starLive',
        payload: {
          deviceId: liveData.deviceId,
          channelId: liveData.channelId,
        },
      }).then((res)=>{
        if(res.code !== -1){
          that.startPlay(res.data.flv);
        }
      })
    }else{

    }
  }
  render() {
    return (
      <div className={styles.videoContent} id={this.state.videoId} ref={el => (this.container = el)}></div>
    )
  }
}
export default CameraPlayer;
